<template>
    <div class="settlement">
        <vheader :isLeft="true" title="确认订单"/>
        <div class="view-body">
            <div>
            <!-- 收货地址 -->
                <section class="cart-address">
                    <p class="title">
                      订单配送至
                    </p>
                    <p class="address-detail">
                      <span  @click="$router.push('/myAddress')" v-if="userAddress">
                          {{userAddress.address}}{{userAddress.bottom}}</span>
                      <span v-else>
                        <span v-if="haveAddress" @click="$router.push('/myAddress')">选择收货地址</span>
                        <span v-else @click="addAddress">新增收货地址</span>
                      </span>
                      <i class="fa fa-angle-right"></i>
                    </p>
                    <h2 v-if="userAddress" class="address-name">
                      <span>{{userAddress.name}}</span>
                      <span v-if="userAddress.sex">({{userAddress.sex}})</span>
                      <span class="phone">{{userAddress.phone}}</span>
                    </h2>
                  </section>
                <!-- 送达时间 -->
                <delivery :shopInfo="orderInfo.shopInfo"/>
                <!-- 点餐内容 -->
                <cartGroup :orderInfo="orderInfo" :totalPrice="totalPrice"/>
                <!-- 备注信息 -->
                <section class="checkout-section">
                    <cartItem title="订单备注" :subHead="remarkInfo.remark ||'口味、偏好'" @click="$router.push('/remark')"/>
                    <cartItem title="餐具份数" :subHead="remarkInfo.tableware ||'未选择'" @click="isShowTableWare=true"/>
                    <cartItem title="发票信息" subHead="不需要开发票"/>
                </section>
                <!-- 显示tableWare -->
                <tableWare :isShow="isShowTableWare" @close="isShowTableWare=false"/>
            </div>
        </div>
        <!-- 底部 -->
        <footer class="action-bar">
            <span>￥{{totalPrice}}</span>
            <button @click="handlePay">去支付</button>
        </footer>
    </div>
  </template>

<script>
    import vheader from "../../components/vheader.vue";
    import delivery from "../../components//Order/delivery.vue";
    import cartGroup from "../../components//Order/cartGroup.vue";
    import cartItem from "../../components//Order/cartItem.vue";
    import tableWare from "../../components//Order/tableWare.vue";
    import {
        Toast
    } from 'mint-ui';
    import axios from 'axios';
    export default {
        name: 'settlement',
        data() {
            return {
                haveAddress: false,
                isShowTableWare: false,
            }
        },
        computed: {
            // 从vuex返回这次的收货地址
            userAddress() {
                return this.$store.getters.user_address
            },
            //也可以从vuex返回用户选择商品的选项
            orderInfo() {
                return this.$store.state.orderInfo;
            },
            //从vuex返回计算总价
            totalPrice() {
                return this.$store.getters.totalPrice;
            },
            //从vuex返回餐具数量
            remarkInfo() {
                return this.$store.getters.remarkInfo;
            },
        },
        created() {
            this.getUserAddress();
        },
        // beforeRouteEnter(to, from, next) {
        //     next(vm => vm.getUserAddress())
        // },
        methods: {
            // 订单详情点击新增地址
            addAddress() {
                this.$router.push({
                    name: "addAddress",
                    addressInfo: {
                        tag: "",
                        sex: "",
                        address: "",
                        name: "",
                        phone: "",
                        bottom: "",
                    },
                })
            },
            getUserAddress() {
                // if (this.$store.state.shouhuoAddress.length) {
                //     this.userAddress = this.$store.state.shouhuoAddress;
                //     this.haveAddress = false;
                //     console.log(this.$store.state.shouhuoAddress, "1111111111111");
                //     console.log(this.userAddress);
                // } else {
                //     this.haveAddress = true;
                // };
                let phone = this.$store.getters.userLogin;
                axios.post(`http://joeweiwx.xyz:8005/saveAddress:${phone}`).then(res => {
                    if (res.data.length > 0) {
                        this.haveAddress = true;
                    } else {
                        this.haveAddress = false;
                    };
                })
            },
            handlePay() {
                if (this.$store.state.user_address.length < 1) {
                    Toast({
                        message: "请选择收货地址",
                        position: 'bottom',
                        duration: 2000,
                    });
                } else {
                    this.$router.push('/pay');
                }

            }

        },

        components: {
            vheader,
            delivery,
            cartGroup,
            cartItem,
            tableWare,
        }
    }
</script>

<style scoped>
    .settlement {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding-top: 44px;
    }
    
    .view-body {
        width: 100%;
        height: 100%;
        overflow: auto;
        box-sizing: border-box;
        font-size: 0.9rem;
        color: #333;
        padding-bottom: 14.133333vw;
        padding-left: 1.6vw;
        padding-right: 1.6vw;
        background-image: linear-gradient( 0deg, #f5f5f5, #f5f5f5 65%, hsla(0, 0%, 96%, 0.3) 75%, hsla(0, 0%, 96%, 0)), linear-gradient(270deg, #009eef, #009eef);
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }
    
    .cart-address {
        background-color: transparent;
        padding: 4.266667vw 2.133333vw 2.933333vw 2.133333vw;
        min-height: 22.133333vw;
        color: #fff;
        overflow: hidden;
    }
    
    .cart-address .title {
        font-size: 0.9rem;
        line-height: 1.21;
        color: hsla(0, 0%, 100%, 0.8);
    }
    
    .cart-address .address-detail {
        font-size: 1.3rem;
        font-weight: 600;
        line-height: 1.50rem;
        overflow: hidden;
        display: flex;
        align-items: center;
    }
    
    .address-detail>span {
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: calc(100% - 4vw);
    }
    
    .address-detail>i {
        margin-left: 2.133333vw;
    }
    /* 显示送货地址 */
    
    .address-name {
        font-size: 0.86rem;
        line-height: 1.21;
        margin-bottom: 1.333333vw;
    }
    
    .address-name .phone {
        margin-left: 2.133333vw;
    }
    
    .address-tag {
        border: 0.133334vw solid hsla(0, 0%, 100%, 0.8);
        margin-left: 1.6vw;
        display: inline-block;
        padding: 0.533333vw;
        white-space: nowrap;
        border-radius: 0.133333vw;
        font-size: 0.6rem !important;
        line-height: 2.666667vw;
    }
    
    .checkout-section {
        margin-bottom: 2.133333vw;
        padding: 0 5.333333vw;
        background: #fff;
        box-shadow: 0 0.133333vw 0.266667vw 0 rgba(0, 0, 0, 0.05);
    }
    /* 底部支付样式 */
    
    .action-bar {
        height: 11.733333vw;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background: #3c3c3c;
        z-index: 2;
    }
    
    .action-bar>span {
        color: #fff;
        font-size: 1.2rem;
        line-height: 11.733333vw;
        padding-left: 2.666667vw;
        vertical-align: middle;
    }
    
    .action-bar>button {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        background: #00e067;
        min-width: 28vw;
        padding: 0 1.333333vw;
        border: none;
        color: #fff;
        font-size: 1.2rem;
    }
</style>